<script setup>
const route = useRoute()

const images = ref([
  "https://picsum.photos/588/588",
  "https://picsum.photos/588/588?index=1",
  "https://picsum.photos/588/588?index=2",
  "https://picsum.photos/588/588?index=3",
  "https://picsum.photos/588/588?index=4",
  "https://picsum.photos/588/588?index=5",
  "https://picsum.photos/588/588?index=6",
  "https://picsum.photos/588/588?index=7",
  "https://picsum.photos/588/588?index=8",
  "https://picsum.photos/588/588?index=9",
  "https://picsum.photos/588/588?index=10",
])

const contentList = ref([
  {
    title: '租赁产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=1',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  },
  {
    title: '购买产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=2',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  }
])
</script>
<template>
  <div class="w-full h-full flex justify-center flex-col items-center pb-20 pt-20">
    <!-- {{ route.params.id }}   产品详情页 -->

    <div class="flex justify-start w-full">
      <img class="w-2/3" src="https://picsum.photos/800/588?index=11" alt="" />
      <div class="h-full flex-1 p-[4rem]">
        <h1>OHT9300B 智能型 4G 远控球阀</h1>
        <p class="color-[#333] pt-[1rem]">型号: {{ route.params.id }}</p>
        <p class="color-[#333] pt-[1rem]">
          产品描述产品描述产品描述产品描述产品描述产品描述产品描述产品描述产品描述
        </p>
        <div>
          <el-button color="#ffcd11" class="mt-[1rem] w-full">请求报价</el-button>
        </div>
        <div><el-button class="mt-[1rem] w-full">寻求合作</el-button></div>
        <el-divider />
        <h3>主要技术规格</h3>
        <el-descriptions :column="1" :size="'default'" direction="vertical">
          <el-descriptions-item label="功率">
            <span class="color-black text-[1.4rem]">9999 kw</span>
          </el-descriptions-item>
          <el-descriptions-item label="能力">
            <span class="color-black text-[1.4rem]">什么都能干</span>
          </el-descriptions-item>
          <el-descriptions-item label="产品特性">
            <span class="color-black text-[1.4rem]">强！ 超级强！</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 介绍 -->
    <div class="bg-[#000] color-[#fff] w-full text-left flex">
      <div class="w-2/3 p-[3rem_5rem]">
        <h3 class="text-[2rem] font-normal">概述</h3>
        <h4 class="text-[1.2rem] color-[#999]">副标题副标题副标题副标题</h4>
        <p class="pt-[.5rem] text-[2.6rem]">描述产品描述产品描述产品描述产</p>
        <p class="pt-[.5rem]">
          产品描述产品描述产品描述产品描述产品描述产品描述产品描述产品描述产品描述
        </p>
      </div>
      <div class="p-[3rem_0]">
        <h3 class="text-[2rem] font-normal">优点</h3>
        <div v-for="item in 3">
          <h2 class="text-[3rem]">管道性能</h2>
          <p>18 吨吊管机具有平稳的响应、出色的操控性能且易于运输。</p>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="bg-[#f8f8f8] color-[#000] w-full text-center pt-[2rem]">
      <div>
        <h2
          class="m-auto inline-block color-[#000] text-[3rem] font-bold relative after:absolute after:left-[50%] after:ml-[-25%] after:bottom-0 after:content-[''] after:w-1/2 after:h-1 after:bg-[#ffcd11] text-center">
          适用场景
        </h2>
      </div>
      <div class="w-full bg-[#f8f8f8] flex justify-center items-center">
        <div class="w-4/5 pt-[3.5rem] pb-[3.5rem]">
          <el-row :class="index % 2 == 0 ? '' : 'flex-row-reverse'" v-for="(item, index) in contentList"
            :key="item.title">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="p-[5rem] bg-[#fff]">
              <p
                class="m-0 text-[3rem] font-bold inline-block relative after:absolute after:left-0 after:bottom-0 after:content-[''] after:w-1/4 after:h-1 after:bg-[#ffcd11] text-left">
                {{ item.title }}
              </p>
              <p class="text-[1.2rem] mt-2">
                {{ item.des }}
              </p>
              <div class="pt-[1rem] flex justify-end">
                <el-button type="warning">{{ item.btn }}</el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <img class="w-full" :src="`${item.img}?index=${item.index}`" alt="" srcset="" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="bg-[#000] color-[#fff] w-full text-center pt-[2rem]">
      <div>
        <h2
          class="m-auto inline-block color-[#fff] text-[3rem] font-bold relative after:absolute after:left-[50%] after:ml-[-25%] after:bottom-0 after:content-[''] after:w-1/2 after:h-1 after:bg-[#ffcd11] text-center">
          下载资源
        </h2>
      </div>
      <el-space class="w-2/3 pt-[3rem] pb-[5rem]" alignment="center" :size="25" wrap :fill="true" :fill-ratio="40">
        <div class="bg-[#ccc] p-[1rem]">fffff</div>
        <div class="bg-[#ccc] p-[1rem]">fffff</div>
        <div class="bg-[#ccc] p-[1rem]">fffff</div>
        <div class="bg-[#ccc] p-[1rem]">fffff</div>
      </el-space>
    </div>
    <!-- 产品图 -->
    <div class="bg-[#f8f8f8] color-[#fff] w-full text-center mt-[2rem]">
      <div>
        <h2
          class="m-auto inline-block color-[#000] text-[3rem] font-bold relative after:absolute after:left-[50%] after:ml-[-25%] after:bottom-0 after:content-[''] after:w-1/2 after:h-1 after:bg-[#ffcd11] text-center">
          媒体资源
        </h2>
      </div>
      <!-- <div class="flex justify-center pt-[2rem]"> -->
      <ProductImgs :images="images" style="width: 80%; margin:0 auto;margin-top:3rem;" />
      <!-- </div> -->
    </div>

  </div>
</template>
